<template>

    <view class="swiper-height">
        <view>
            <C3Scroll :c3List="c3List" :active_index="queryWrapper.level_three_category_id" @handleTap="handleC3Tap" />
        </view>
        <view style="margin-top: -20rpx;">
            <view class="mid-row">
                <C2Scroll class="c2-scroll" :c2List="c2List" :c2Id="queryWrapper.level_two_category_id"
                    @do="handleC2Tap" />

                <view class="right">
                    <ItemsContainer layout="1" :status="status" @on-lower="handleOnLower" class="items-container"
                        :itemList="goodList" 
                        detail_url="/pages/detail/index" collect_url="/api/onlyforone/collection/add"
                    cancel_collect_url="/api/onlyforone/collection/delete"
                         />
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import C2Scroll from '@/pages/search/c2-scroll'
import C3Scroll from '@/pages/hardware/c3-scroll'
import { ref, reactive, nextTick, defineProps, watch, defineEmits } from 'vue'
import ItemsContainer from '@/pages/search/items-container'
import { getDetail, pageGood, getData } from '@/api/hardware'
import { isNotNull } from '@/utils/str'
const c2List = ref([])
const c3List = ref([])
const goodList = ref([])
const totalPage = ref(0)
const status = ref('loadmore')
let loading = ref(true)
const emits = defineEmits(['doSearchDone','updateQuery'])
const props = defineProps({
    id: {
        type: String,
        default: ''
    },
    active_id: {
        type: String,
        default: 0
    },
    do_search: {
        type: Boolean,
        default: false
    },
    _options: {
        type: Object,
        default: {
            level_one_category_id: '',
            level_two_category_id: '',
            level_three_category_id: '',
            pageSize: 10,
            pageNumber: 1,
            keyword: ''
        }
    }
})
// debugger
let queryWrapper = reactive({

    level_one_category_id: '',
    level_two_category_id: '',
    level_three_category_id: '',
    pageSize: 10,
    pageNumber: 1,
    keyword: '',
    level_one_category_title:'',
    level_two_category_title:'',
    level_three_category_title:'',
})

watch(() => [props.active_id, props.do_search], ([newActiveId, newDoSearch], [oldActiveId, oldDoSearch]) => {



    // debugger
    if (newActiveId == props.id) {
        debugger
        handleNewActiveId()
    }
    if (newDoSearch && newActiveId == props.id) {
        debugger
        handleSearch()
    }
}, { deep: true })


const handleNewActiveId = () => {
    queryWrapper.level_one_category_id = props.id


    queryWrapper.keyword = props._options.keyword
    loading.value == true && init(queryWrapper.level_one_category_id).then(() => {


    })
}


const handleSearch = async () => {
    if (loading.value) {
        return
    }

    loading.value = true
    queryWrapper.pageNumber = 1
    queryWrapper.keyword = props._options.keyword
    let { pageInfo, items } = await pageGood(queryWrapper)
    goodList.value = items
    totalPage.value = pageInfo.totalPage
    if (queryWrapper.pageNumber >= totalPage.value) {
        status.value = 'nomore'
    }
    nextTick(() => {
        loading.value = false
        emits('doSearchDone')
    })
}

const init = (id) => {
    loading.value = true


    // debugger

    return getDetail(id).then(res => {

        c2List.value = res.level_two_category.map(el => {
            let r = {};

            r.name = el.title;
            r.id = el.key
            return r
        })
        c3List.value = [{ id: '', title: '全部' }].concat(res.level_three_category.map(el => {
            let r = {};

            r.title = el.title;
            r.id = el.key
            return r
        }))


        queryWrapper.level_two_category_id =isNotNull(props._options.level_two_category_id)?
            props._options.level_two_category_id : c2List.value[0]['id']

        if (isNotNull(props._options.level_three_category_id)) {
            queryWrapper.level_three_category_id = props._options.level_three_category_id
        }



        // debugger
        return pageGood(queryWrapper)
    }).then((r) => {

        goodList.value = r.items

        totalPage.value = r.pageInfo.totalPage
        if (r.pageInfo.totalPage == r.pageInfo.currentPage) {
            status.value = 'nomore'
        }

        // debugger
        return {}
    })
        .catch((e) => {
            console.error(e)
            status.value = 'loadmore'
        })
        .finally(() => {
            nextTick(() => {
                loading.value = false
            })
        })

}


const handleC2Tap = async (c2) => {
    
    if (loading.value) {
        return
    }
    // debugger

    queryWrapper.level_two_category_id = c2.id
    queryWrapper.level_two_category_title = c2.name

    updateQuery()
    loading.value = true
    // 一些初始化的操作
    goodList.value = []
    totalPage.value = 0
    queryWrapper.pageNumber = 1
    status.value = 'loading'
    try {
        let { pageInfo, items } = await pageGood(queryWrapper)
        goodList.value = items
        totalPage.value = pageInfo.totalPage
        if (queryWrapper.pageNumber >= totalPage.value) {
            status.value = 'nomore'
        }
    } catch (e) {
        console.error(e)
    } finally {
        nextTick(() => {
            loading.value = false
        })

    }
}


const updateQuery = ()=>{
    
    emits('updateQuery',{
        level_one_category_id:queryWrapper.level_one_category_id,
        level_two_category_id:queryWrapper.level_two_category_id,
        level_three_category_id:queryWrapper.level_three_category_id,

        // level_one_category_title:queryWrapper.level_one_category_title,
        level_two_category_title:queryWrapper.level_two_category_title,
        level_three_category_title:queryWrapper.level_three_category_title,
    })
}

const handleC3Tap = async (c3) => {
    if (loading.value) {
        return
    }

    debugger

    loading.value = true
    goodList.value = []
    totalPage.value = 0
    queryWrapper.level_three_category_id = c3.id
    queryWrapper.level_three_category_title = c3.title
    queryWrapper.pageNumber = 1
    //reload c2 List,
    status.value = 'loading'

    updateQuery()

    try {
        let { pageInfo, items } = await pageGood(queryWrapper)

        goodList.value = items
        totalPage.value = pageInfo.totalPage
        if (queryWrapper.pageNumber >= totalPage.value) {
            status.value = 'nomore'
        }

    } catch (e) {
        console.error(e)
    } finally {
        nextTick(() => {
            loading.value = false
        })
    }



}

const handleOnLower = async () => {
    if (queryWrapper.pageNumber >= totalPage.value) {
        return
    }

    if (loading.value) {
        return
    }
    status.value = 'loading'

    loading.value = true
    queryWrapper.pageNumber++
    let { pageInfo, items } = await pageGood(queryWrapper)
    goodList.value = goodList.value.concat(items)
    totalPage.value = pageInfo.totalPage
    if (queryWrapper.pageNumber >= totalPage.value) {
        status.value = 'nomore'
    }
    nextTick(() => {
        loading.value = false
    })
}

const refreshData = async () => {
    if (loading.value) {
        return
    }



    status.value = 'loading'

    loading.value = true

    let { pageInfo, items } = await pageGood(queryWrapper)
    goodList.value = items
    totalPage.value = pageInfo.totalPage
    if (queryWrapper.pageNumber >= totalPage.value) {
        status.value = 'nomore'
    }
    nextTick(() => {
        loading.value = false
    })
}
</script>

<style lang="scss" scoped>
@import '@/pages/hardware/common.scss';
.mid-row {
    flex: 1;
    display: flex;
    overflow: hidden;

    .c2-scroll {
        //width: 150rpx;
    }

    .right {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        .items-container {
            flex: 1;
            overflow: hidden;
        }
    }
}
</style>